<template>
  <div>
    <!-- 搜索查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.category"
          placeholder="请输入课程类别查询"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findCourse">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    <!-- 新增学生家庭信息 -->
      <el-form-item>
        <el-button type="success" @click="addCourseInfo(form)">新增课程信息</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增数据弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增课程信息">
      <el-form :model="formData" ref="form" :rules="rules">
        <el-form-item label="课程名" prop="course_Name" :label-width="formLabelWidth">
          <el-input v-model="formData.course_Name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程图片" prop="course_img" :label-width="formLabelWidth">
          <el-input v-model="formData.course_img" autocomplete="off" />
          <!-- <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload> -->
        </el-form-item> 
        <el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model="formData.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程学分" prop="point" :label-width="formLabelWidth">
          <el-input v-model="formData.point" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程分类" prop="category" :label-width="formLabelWidth">
          <el-input v-model="formData.category" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程介绍" prop="Introduction" :label-width="formLabelWidth">
          <el-input v-model="formData.Introduction" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="sure(form)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- table表格 -->
  <el-table
      :data="data.tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border :row-class-name="tableRowClassName">
      <el-table-column prop="course_Name" label="课程名" align="center" min-width="8%"/>
      <el-table-column prop="course_img" label="课程图片" align="center" min-width="12%">
        <template #default="scope">
          <img :src="scope.row.course_img" class="courseImg-img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="书本价格" align="center" min-width="8%"/>
      <el-table-column prop="point" label="课程学分" align="center" min-width="8%"/>
      <el-table-column prop="category" label="课程分类" align="center" min-width="8%"/>
      <el-table-column prop="Introduction" label="课程介绍" align="center" min-width="20%"/>
      <el-table-column prop="操作" label="操作" align="center" min-width="10%">
        <template #default="scope">
          <!-- scope.row可以获取当前item中的所有数据 -->
          <el-button type="primary" round @click="edit(scope.row)" > 
            <Edit style="width: 1.2em; height: 1.2em; margin-right: 0" />
           </el-button>
          <el-popconfirm title="确定要删除该课程及相关信息？" @confirm="delCourseInfo(scope.row)" confirm-button-type="danger">
            <template  #reference>
              <el-button type="danger" round>
                <Delete style="width: 1.2em; height: 1.2em; margin-right: 0" />
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  
  <div class="pagination">
  <!-- 分页 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <!-- 编辑弹窗 -->
  <div>
    <el-dialog v-model="popShow" title="修改课程信息">
      <el-form :model="editData" ref="ruleFormRef" :rules="rules">
        <el-form-item label="ID" prop="id" :label-width="formLabelWidth" v-if="false">
          <el-input v-model="editData.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程名" prop="course_Name" :label-width="formLabelWidth">
          <el-input v-model="editData.course_Name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程图片" prop="course_img" :label-width="formLabelWidth">
          <el-input v-model="editData.course_img" autocomplete="off" />
        </el-form-item> 
        <el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model="editData.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程学分" prop="point" :label-width="formLabelWidth">
          <el-input v-model="editData.point" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程分类" prop="category" :label-width="formLabelWidth">
          <el-input v-model="editData.category" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程介绍" prop="Introduction" :label-width="formLabelWidth">
          <el-input v-model="editData.Introduction" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="popShow = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入课程信息列表接口以及增删改查接口
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
// 获取后台数据接口
import { courseList,courseListFind,updatecourseList,delcourseList,addcourseList } from '../../../api/api'
// 根据课程类别查询
const formInline = reactive({
  category:''
})
// 定义编辑需要的数据
let popShow = ref(false)
let ruleFormRef = ref(null)
const editData = reactive({
    course_Name:'',
    course_img:'',
    price:'',
    point:'',
    category:'',
    Introduction:'',
    id:''

})

// 获取后台数据
let data = reactive({
    tableData:[]
})
// 定义分页的数据
let currentPage = ref(1)//当前页数
let pageSize = ref(5);//每页显示条数
let total = ref(0)//总条数(实际总条数是从接口获取的)
// 分页的方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  console.log(`每页 ${val} 条`);
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  console.log(`当前页： ${val} 条`)
};

onMounted(() =>{
    courseInfoData()
});
// 获取数据
const courseInfoData = async(params) =>{
  await courseList(params).then((res) =>{
    console.log(res)
    if (res.data.code === 0) {
      data.tableData = res.data.data.list;
      console.log('数据')
      total.value = res.data.data.total;
    }
  })
}
// 查询课程
const findCourse = async () => {
  console.log(formInline)
  await courseListFind(formInline).then((res) => {
    console.log(res);
    if (res.data.code === 0) {
      data.tableData = res.data.data.list;
      total.value = res.data.data.total;
      if(formInline.category){
        ElMessage({
          message: "查询成功",
          type: "success",
        })
      }else{
        ElMessage({
          message: "请输入要查询的内容",
          type: "warning",
        })
      }
    }
    
  });
};
// 重置
const reset = ()=>{
  courseInfoData()
}
// 新增课程
let dialogFormVisible = ref(false)//新增弹窗显示/隐藏
const formLabelWidth = '90px'
const formData = reactive({
    course_Name:'',
    course_img:'',
    price:'',
    point:'',
    category:'',
    Introduction:''

})
// 新增数据表单验证
const rules = {
    course_Name: [{ required: true, message: "请输入课程名" }],
    course_img: [{ required: true,message: "上传图片" }],
    price: [{ required: true, message: "请输入书本价格" }],
    point: [{ required: true, message: "请输入课程学分" }],
    category: [{ required: true, message: "请输入课程分类" }],
    Introduction: [{ required: true, message: "请输入课程介绍" }],
}
// 新增数据
const addCourseInfo = (form) =>{
  console.log('新增数据')
    console.log(form)
    dialogFormVisible.value = true
    form.resetFields()//重置表单
}
// 添加数据确定按钮
let form = ref(null)
let sure = async (form) => {
  await form.validate((valid) => {
    if (valid) {
      console.log("新增数据", formData);
      addcourseList(formData).then((res) => {
        console.log(formData)
        console.log('@@')
        console.log(res)
        if (res.data.code === 0) {
          courseInfoData();
          ElMessage({
            type: "success",
            message: res.data.message,
          });
          dialogFormVisible.value = false; //关闭弹框
        }
      });
    }
  });
};


// 删除课程信息
const delCourseInfo = (row) =>{
    console.log(row)
    delcourseList(row.id).then((res) =>{
        console.log(res)
        if(res.data.code === 0){
            ElMessage({
                message:'删除成功',
                type:'success'
            })
            // 删除成功后重新渲染数据
            courseInfoData();
        }
    })
}
// 编辑按钮
const edit = (row)=>{
  console.log('编辑',row)
  popShow.value = true//显示对话框
  editData.id = row.id//传值
  editData.course_Name = row.course_Name
  editData.course_img = row.course_img
  editData.price = row.price
  editData.point = row.point
  editData.category = row.category
  editData.Introduction = row.Introduction
  console.log('赋值',editData)
}
// 编辑确定按钮
let submitForm = async (ruleFormRef) => {
  await ruleFormRef.validate((valid) => {
    if (valid) {
      console.log("编辑数据",editData);
      updatecourseList(editData).then((res) => {
        console.log(editData)
        console.log('@@')
        console.log(res)
        if (res.data.code === 0) {
          ElMessage({
            type: "success",
            message: res.data.message,
          });
          courseInfoData()
          popShow.value = false; //关闭弹框
          
        }
      });
    }
  });
};





</script>

<style lang="less" scoped>
.courseImg-img{
    width: 70px;
    height: 70px;
}
</style>